<template>
  <view>
    <view class="bot flex">
      <view class="left flex-center-between">
        <view class="bag-bg" @click="showOrderClick">
          <view class="bag-real">
            <text class="iconfont mr10 font16">&#xe696;</text>
            <text>购物袋</text>
          </view>
          <view class="pot">{{goodCount}}</view>
        </view>
        <view>
          <text>￥</text>
          <text class="font18">{{totalPrice}}</text>
        </view>
      </view>
      <view class="right txt-center white" @click="gotoPay">去结账</view>
    </view>

  </view>
</template>

<script>
import {mainData} from "@/pages/cart/components/mainData";
import {Validate} from "@/config/validate";
export default {
  name: 'cartDraft',
  mixins: [],
  components: {},
  props: {
    pageShowFlag:Boolean
  },
  data () {
    return {
      showFlag:false,
    }
  },
  computed: {
    goodCount(){
      let goods = mainData.cartData.goods||[];
      if (!Validate.isEmpty(goods)){
        let count = 0 ;
        goods.forEach(e=>{
          count += Number(e.num);
        });
        return count;
      }
      return '';
    },
    totalPrice(){
      let goods = mainData.cartData.goods||[];
      if (!Validate.isEmpty(goods)){
        let count = 0 ;
        goods.forEach(e=>{
          count += Number(e.goodsPrice) * Number(e.num);
        });
        return count;
      }
      return 0;
    }
  },
  watch: {},
  created () {},
  mounted () {

  },
  methods: {
    minusClick(){

    },
    addClick(){

    },
    showOrderClick(){
      this.$emit('showOrder')
    },
    gotoPay(){
      uni.navigateTo({
        url: '/pages/cart/orderDown'
      });
    }
  }
}
</script>

<style scoped lang="scss">
.bot{
  position: fixed;
  left: 20rpx;
  width: calc(100% - 40rpx);
  bottom: 10rpx;
  border-radius: 50rpx;
  height: 100rpx;
  //overflow: hidden;
  .left{
    height: 100rpx;
    background-color: #F0F0F0;
    line-height: 100rpx;
    flex-grow: 1;
    border-top-left-radius: 50rpx;
    border-bottom-left-radius: 50rpx;
    padding-right: 20rpx;
    .bag-bg{
      margin-left: 20rpx;
      position: relative;
      height:100%;
      width:200rpx;
      .bag-real{
        position: absolute;
        left: 0;
        top: -20rpx;
        width: 200rpx;
        height: 100rpx;
        border-radius: 75rpx;
        background-color: white;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
        line-height: 100rpx;
        text-align: center;
      }
      .pot{
        height: 30rpx;
        min-width: 30rpx;
        border-radius: 15rpx;
        background-color: var(--nav-bg-c);
        line-height: 30rpx;
        text-align: center;
        position: absolute;
        right: 0;
        top: -30rpx;
        color:white;
        font-size: 24rpx;
      }
    }
  }
  .right{
    width: 190rpx;
    line-height: 100rpx;
    background-color: var(--nav-bg-c);
    border-top-right-radius: 50rpx;
    border-bottom-right-radius: 50rpx;
  }
}
</style>
